<script setup lang="ts">
import Password from '@/components/Password.vue'
</script>

<template>
	<div class="login">
		<div class="login-cont">
			<div class="title mb-20">首次登录，请及时修改密码</div>
			<Password class="el-password" :isFirstLogin="true" />
		</div>
	</div>
</template>

<style lang="scss" scoped>
.login {
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: $color-f2;

	input::-webkit-input-placeholder {color: $color-ccc !important}
	input::-moz-placeholder {color: $color-ccc !important}

	:deep(.el-input__wrapper) {
		background-color: rgba(255, 255, 255, .6);
	}

	:deep(.el-password) {
		label.el-form-item__label {
			display: none;
			text-indent: -9999px;
		}
	}

	.login-cont {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-left: -2.5rem;
		margin-top: -1.8rem;
		padding: .2rem .4rem;
		width: 5rem;
		// min-height: 2.8rem;
		overflow: hidden;
		border-radius: .1rem;
		border: .01rem solid $color-white;
		box-shadow: .01rem .02rem .03rem .02rem grba(255, 255, 255, .4);
		background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, .35)), to(rgba(255, 255, 255, .65)));
		background-image: linear-gradient(115deg, rgba(255, 255, 255, .35) 0, rgba(255, 255, 255, .65) 100%);

		&:after {
			position: absolute;
			left: -.4rem;
			top: 0;
			z-index: -1;
			width: 12rem;
			height: 11.2rem;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, .03);
			content: '';
		}

		.title {
			font-size: .22rem;
		}

		label {
			display: none;
			text-indent: -9999px;
		}

		.btn {
			width: 100%;
			height: .4rem;
		}

		.send-verification-code {
			position: absolute;
			right: .1rem;
			top: 0;
			color: $color-333;
			cursor: pointer;

			&:hover {
				color: $color-666;
			}
		}
	}

	.login-auxiliary-bar {
		display: -webkit-flex;
		display: flex;
		justify-content: space-between;
		width: 100%;
		font-size: .12rem;
	}
}
</style>